import * as React from "react"
import { ViewStyle, TextStyle } from "react-native"
import { Screen, Header } from "../../components"
import { color } from "../../theme/base/color"

// 已有银行卡，进行充值
import EnterAmount from "./enterAmount"
// 没有银行卡，添加银行卡
import AddBankCard from "./addBankCard"

const styleScreen: ViewStyle = {
  backgroundColor: color.backgroundInnerPage
}

const styleHeader: ViewStyle = {
  backgroundColor: color.text
}

const styleHeaderText: TextStyle = {
  color: color.storybookDarkBg
}

export interface RechargeableProps {
  history?: any
}

export default class Rechargeable extends React.Component<RechargeableProps, any> {
  state = {
    isBinding: true
  }

  public render() {
    return (
      <Screen style={styleScreen}>
        <Header
          onLeftPress={() => {
            this.props.history.goBack()
          }}
          leftIcon="back"
          headerText={this.state.isBinding ? "充值" : "添加银行卡"}
          style={styleHeader}
          titleStyle={styleHeaderText}
        ></Header>
        {this.state.isBinding ? <EnterAmount></EnterAmount> : <AddBankCard></AddBankCard>}
      </Screen>
    )
  }
}
